<template>
  <router-view :class="[mode]" />
</template>

<script setup>
import { computed } from 'vue';
import { useSettingStore } from '@/stores';

const store = useSettingStore();

const mode = computed(() => {
  return store.displayMode;
});
</script>

<style lang="less">
/* 禁用全局滚动条 */
html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100%;
}
/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f5f5f5; /* 乳白色背景 */
  border-radius: 4px; /* 圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #d8d8d8; /* 浅灰色滑块 */
  border: 1px solid #c1c1c1; /* 浅灰色边框 */
  border-radius: 4px; /* 圆角 */
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
  background: #c1c1c1; /* 悬停时颜色加深 */
}
</style>
